@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
.web{
    font-family: 苹方;
    font-size: 0;
    >header{
        margin-top:15px;
        margin-bottom:r(43);
        font-size:0;
        display:flex;
        display:-webkit-flex;
        justify-content: space-around;
        align-items: center;
        >section{
            width:r(370);
            >img{
                width:100%;
            }
            &:nth-of-type(2){
                display: none;
            }
        }//logo
        >nav{
            display: none;
        }
        >.nav{
            font-size:0;
            width:r(1044);
            display:flex;
            display:-webkit-flex;
            justify-content: space-between;
            >li{
                cursor: pointer;
                position: relative;
                font-size: r(30);
                font-family: 宋体;
                color:#000;
                >a{
                    color:#000;
                    &:hover{
                        color:#e67958;
                    }
                }
            }
            >.border_san::after{
                content: "";
                position: absolute;
                display: inline-block;
                left: 0%;
                bottom: -50%;
                transform: translate(100%,50%);
                width: 0;
                height:0;
                border-top:r(15) solid rgb(71, 71, 71);
                border-bottom:r(10) solid transparent;
                border-left:r(10) solid transparent;
                border-right:r(10) solid transparent;
                // background: #000;
            }
        }
    }//头部
    >.banner{       
        position: relative;
        >img{
            width:r(1920);
        }
        >.banner_content{
            width:100%;
            position: absolute;
            z-index: 999;
            text-align: center;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            >h1{
                font-size: r(48);
                color:#fff;
            }
            >p{
                margin-top:r(90);
                margin-bottom:r(100);
                font-size:r(24);
                color: #f2efec;
            }
            >a{
                display: inline-block;
                font-size:r(26);
                padding:r(20) r(75);
                border-radius: 30px;
                color:#fff;
                background: #786ff8;
                cursor: pointer;
            }
        }
    }
    >h3{
        color:#000;
        font-size:r(48);
        text-align: center;
        margin-top:r(118);
        margin-bottom:r(150);
    }
     >.line{
         width:r(1630);
         margin:0 auto;
         display: flex;
         display: -webkit-flex;
         justify-content: space-between;
         >.hd{
            position: relative;
           
            font-size: r(24);
            color:#786ff8;
            margin-bottom:r(29);
            &::after{
                content:"";
                position: absolute;
                left:0;
                bottom:-10px;
                display: inline-block;
                width:r(1145);
                height:3px;
                background:#786ff8;
               
            }
        }
        >.yc{
            position: relative;
        
            margin-right: r(350);
            font-size: r(24);
            color:#786ff8;
            margin-left:r(135);
            margin-bottom:r(29);
            &::after{
                content:"";
                position: absolute;
                left:0;
                bottom:-10px;
                display: inline-block;
                width:r(390);
                height:3px;
                background:#786ff8;
               
            }
        }
     }
      
    
    >.middle_content{
        display: flex;
        display:-webkit-flex;
        justify-content: space-between;
        margin: 0 auto;
        width:r(1630);
        margin-bottom:r(257);
        >.l_content{
            width:r(1145);
           
            display: flex;
            display:-webkit-flex;
            justify-content: space-between;
            >.l_left{
                width:r(650);
                margin-top:r(29);
                >.imgbox{
                 
                    width:100%;
                    height: r(480);
                    overflow: hidden;
                    >img{
                        cursor: pointer;
                        border-radius: 20px;
                        width:100%;
                        transition: transform 0.5s ease-in-out;
                    }
                    &:hover >img{
                        transform: scale(1.1);
                    }
                }//图片
                >span{
                    display: inline-block;
                    margin-top:r(40);
                    margin-bottom:r(47);
                    font-size:r(20);
                    color:#817B7B;
                }
                >h1{
                    font-size: r(30);
                    color:#000;
                    line-height: r(41);
                    margin-bottom:r(22);
                }
                >p{
                    font-size:r(20);
                    font-weight: bold;
                    color:#817B7B;
                }
            }//小左边
            >.l_right{
                margin-top:r(29);
                width:r(396);
                >.imgbox{
                    width:100%;
                    height: r(288);
                    overflow: hidden;
                    >img{
                        cursor: pointer;
                        width:100%;
                        border-radius: 20px;
                        transition: transform 0.5s ease-in-out;
                    }
                    &:hover >img{
                        transform: scale(1.1);
                    }
                }//图片
                >span{
                    display: inline-block;
                    margin-top:r(40);
                    margin-bottom:r(20);
                    font-size:r(20);
                    color:#817B7B;
                }
                >h3{
                    font-size:r(20);
                    color:#000;
                    line-height: r(30);
                    margin-bottom:r(60);
                }
            }//小右边
        }//左边
        >.r_content{
            width:r(395);
                >span{
                    display: inline-block;
                    margin-top:r(30);
                    margin-bottom:r(15);
                    font-size:r(20);
                    color:#817B7B;
                }
                >h3{
                    font-size:r(20);
                    color:#000;
                    line-height: r(30);
                    margin-bottom:r(20);
                }
                >.imgbox{
                    margin-top:r(82);
                    width:r(395);
                    height: r(522);
                    overflow: hidden;
                    >img{
                        cursor: pointer;
                        width:100%;
                        border-radius: 20px;
                        transition: transform 0.5s ease-in;
                    }
                    &:hover>img{
                        transform: scale(1.1);
                    }
                }
        }//右边
    }//活动内容
    >footer{
        position: relative;
        font-family: 微软雅黑;
        width:r(1920);
        >img{
            width:100%;
        }
        >aside{
            position: absolute;
            top:r(207);
            right:r(223);
            >p{
                font-size: r(40);
                color:#fff;
                margin-bottom:r(80);
            }
            >input{
                vertical-align: middle;
                height:r(72);
                width:r(545);
                border-top-left-radius: 50px;
                border-bottom-left-radius: 50px;
                font-size: r(14);
                border: 0;
                padding: 0 r(20);
            }
            >span{
                vertical-align: middle;
                display:inline-block;
                text-align: center;
                line-height: r(16);
                color:#786ff8;
                background: #fff;
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
                font-size: r(16);
                height:r(72);
                padding:r(28) r(18);
            }
        }
    }
}//web
@media only screen and (min-width: 768px)and (max-width:992px) {
    .web{
        font-family: 苹方;
        font-size: 0;
        >header{
            >section{
                >img{
                    width:100%;
                }
                &:nth-of-type(2){
                    display: none;
                }
            }//logo
            >nav{
                display: none;
            }
            >.nav{
                >li{
                    font-size: 16px;
                    font-family: 宋体;
                    color:#000;
                    >a{
                        color:#000;
                        &:hover{
                            color:#e67958;
                        }
                    }
                }
            }
        }//头部
        >.banner{     
            display: none;  
          
        }//banner

    }//web
}
@media only screen and (max-width: 768px) {
    .web{
        overflow: hidden;
        font-family: 苹方;
        font-size: 0;
        >header{
            margin:0 auto;
            margin-top:20px;
            margin-bottom:r(43);
            font-size:0;
            display:flex;
            display:-webkit-flex;
            justify-content: space-between;
            align-items: center;
            width:85%;
            >section{
                // margin-left:32px;
                width:r(150);
                >img{
                    width:100%;
                }
                &:nth-of-type(1){
                    display: none;
                }
                &:nth-of-type(2){
                    display: block;
                }
            }//logo
            >nav{
                display: flex;
                display:-webkit-flex;
                flex-direction: column;
                // flex-wrap: wrap;
                margin:0;
                padding:0;
                width:36px;
                // margin-right:32px;
                
                >span{
                    margin-bottom:5px;
                    width:25px;
                    height:3px;
                    border-radius: 3px;
                    background: #333;
                }
            }
            >.nav{
                position: absolute;
                top:5px;
                right: r(270);
                font-size:0;
                width:130px;
                display:flex;
                display:-webkit-flex;
                flex-wrap: wrap;
                z-index: 9999;
                animation: fadeIn .5s;
                border: 1px #d3d3d3 solid;
                box-shadow: 0px 1px 1px #a0a0a0;
                border-radius: 10px;
                display: none;
                >li{
                    background:#fff;
                    padding:0;
                    margin:0;
                    text-align: center;
                    padding:8px 0;
                    width: 100%;
                    font-size: 12px;
                    font-family: 宋体;
                    color:#000;
                    &:hover{
                        color:#fff;
                        background: #e67958;
                    }
                    >a{
                        color:#000;
                        &:hover{
                            color:#fff;;
                        }
                    }
                }
            }
        }//头部
        >.banner{       
            width:100%;
            position: relative;
            >img{
                width:100%;
            }
            >.banner_content{
                width:100%;
                position: absolute;
                z-index: 999;
                text-align: center;
                left:50%;
                top:50%;
                transform: translate(-50%,-50%);
                >h1{
                    font-size: r(48);
                    color:#fff;
                }
                >p{
                    margin-top:r(90);
                    margin-bottom:r(100);
                    font-size:r(24);
                    color: #f2efec;
                }
                >a{
                    display: inline-block;
                    font-size:r(26);
                    padding:r(20) r(75);
                    border-radius: 30px;
                    color:#fff;
                    background: #786ff8;
                }
            }
        }
        >h3{
            color:#000;
            font-size:r(48);
            text-align: center;
            margin-top:r(118);
            margin-bottom:r(60);
        }
         >.line{
             width:95%;
             margin:0 auto;
             display: flex;
             display: -webkit-flex;
             justify-content: space-between;
             >.hd{
                position: relative;
                font-size: r(24);
                color:#786ff8;
                margin-bottom:r(29);
                &::after{
                    content:"";
                    position: absolute;
                    left:0;
                    bottom:-10px;
                    display: inline-block;
                    width:r(1980);
                    height:3px;
                    background:#786ff8;
                   
                }
            }
            >.yc{
                position: relative;
                display: none;
                margin-right: r(350);
                font-size: r(24);
                color:#786ff8;
                margin-left:r(135);
                margin-bottom:r(29);
                &::after{
                    content:"";
                    position: absolute;
                    left:0;
                    bottom:-10px;
                    display: inline-block;
                    width:r(390);
                    height:3px;
                    background:#786ff8;
                   
                }
            }
         }
          
        
        >.middle_content{
            display: flex;
            display:-webkit-flex;
            flex-wrap: wrap;
            margin: 0 auto;
            width:95%;
            margin-top:10px;
            margin-bottom:r(257);
            >.l_content{
                width:100%;
                display: flex;
                display:-webkit-flex;
                flex-wrap: wrap;
                justify-content: space-around;
                >.l_left{
                    margin-bottom:20px;
                    width:100%;
                    margin-top:r(29);
                    >.imgbox{
                        width:100%;
                        height: auto;
                        >img{
                            border-radius: 20px;
                            width:100%;
                        }
                    }//图片
                    >span{
                        display: inline-block;
                        margin-top:r(40);
                        margin-bottom:r(47);
                        font-size:r(20);
                        color:#817B7B;
                    }
                    >h1{
                        font-size: r(40);
                        color:#000;
                        line-height: r(80);
                        margin-bottom:r(22);
                    }
                    >p{
                        font-size:r(30);
                        font-weight: bold;
                        line-height: r(70);
                        color:#817B7B;
                    }
                }//小左边
                >.l_right{
                    display:flex;
                    display:-webkit-flex;
                    justify-content: space-between;
                    margin-top:r(29);
                    width:100%;
                    >.imgbox{
                        width:47%;
                        height: auto;
                        >img{
                            width:100%;
                            border-radius: 20px;
                        }
                    }//图片
                    >span{
                        display: inline-block;
                        display:none;
                        margin-top:r(40);
                        margin-bottom:r(20);
                        font-size:r(20);
                        line-height: r(60);
                    }
                    >h3{
                        display:none;
                        font-size:r(20);
                        color:#000;
                        line-height: r(60);
                        margin-bottom:r(60);
                    }
                }//小右边
            }//左边
            >.r_content{
                display: none;
                width:r(395);
                    >span{
                        display: inline-block;
                        margin-top:r(30);
                        margin-bottom:r(15);
                        font-size:r(20);
                        color:#817B7B;
                    }
                    >h3{
                        font-size:r(20);
                        color:#000;
                        line-height: r(30);
                        margin-bottom:r(20);
                    }
                    >.imgbox{
                        margin-top:r(82);
                        width:r(395);
                        height: auto;
                        >img{
                            width:100%;
                            border-radius: 20px;
                        }
                    }
            }//右边
        }//活动内容
        >footer{
            position: relative;
            font-family: 微软雅黑;
            width:100%;
            >img{
                width:100%;
            }
            >aside{
                position: absolute;
                top:r(207);
                right:r(223);
                >p{
                    font-size: r(40);
                    color:#fff;
                    margin-bottom:r(80);
                }
                >input{
                    display: none;
                }
                >span{
                    display: none;
                }
            }
        }
    }//web
}